<template>
  <view class="content">
    <z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" use-page-scroll>

      <view class="comments-header">
        <view class="comments-header-tag" :class="commentType === '' ? 'comments-header-active' : ''"
          @click="changeTag('')">
          {{ `全部(${countObj.all})` }}
        </view>
        <view class="comments-header-tag" :class="commentType === '5' ? 'comments-header-active' : ''"
          @click="changeTag('5')">
          {{ `好评(${countObj.good})` }}
        </view>
        <view class="comments-header-tag" :class="commentType === '3' ? 'comments-header-active' : ''"
          @click="changeTag('3')">
          {{ `中评(${countObj.middle})` }}
        </view>
        <view class="comments-header-tag" :class="commentType === '1' ? 'comments-header-active' : ''"
          @click="changeTag('1')">
          {{ `差评(${countObj.bad})` }}
        </view>
      </view>
      <block v-for="(item, index) in dataList" :key="index">
        <comments-card :commentScore="item.level" :userName="item.userName" :commentContent="item.content"
          :commentTime="item.time" :commentResources="[]" />
      </block>
    </z-paging>

  </view>
</template>
<script>
import commentsCard from '@/components/commentsCard/index';
export default {
  components: {
    commentsCard
  },
  data() {
    return {
      pageLoading: false,
      commentList: [],
      total: 0,
      hasLoaded: false,
      myLoadStatus: 0,
      commentType: '',
      countObj: {
        all: 0,
        good: 0,
        middle: 0,
        bad: 0,
      },
      dataList: []
    }
  },
  onLoad(options) {
    this.productUpId = options.productUpId
    this.getCount();
  },
  methods: {
    async queryList(pageNo, pageSize) {
      const { productUpId, commentType } = this;
      const param = {
        page: {
          current: pageNo,
          size: pageSize,
        },
        query: { productUpId, level: commentType }
      };
      let result = await this.$request.miniFindEvaluateByPage(param)
      this.$refs.paging.complete(result.data.records);

    },
    async getCount() {
      const { productUpId } = this;
      let result = await this.$request.miniEvaluateNum({ productUpId })
      this.countObj = result.data
    },

    changeTag(commenttype) {
      this.commentType = commenttype
      this.$refs.paging.reload()
    },
  },
}
</script>
<style scoped>
.comments-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 32rpx 32rpx 24rpx !important;
  background-color: #fff;
  margin-top: -24rpx;
}

.comments-header-tag {
  width: 150rpx;
  margin-top: 24rpx;
  line-height: 56rpx !important;
  font-size: 24rpx !important;
  justify-content: center;
  background-color: #F5F5F5 !important;
  border-radius: 30rpx !important;
  border: 1px solid #F5F5F5 !important;
  color: #32B499;
  text-align: center;
}

.comments-header-active {
  background-color: #32B499 !important;
  color: #fff !important;
}

.no-more {
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.comments-card-list {
  padding: 24rpx 24rpx 0;
  background-color: #F6F6F6;
}

.comments-card-list>view {
  padding: 10rpx;
  background-color: #fff;
  border-radius: 24rpx;
}
</style>